<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/metroStyle.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/ext.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3564966_a6tt4yhnzge.css" media="all">
    <link rel="stylesheet" href="../plugins/toastr/toastr.min.css?v=${.Config.basic.version}">
    <style>
        .layui-input{
            font-size: 11px;
        }
        .layui-form-label-sm {
            float: left;
            display: block;
            padding: 7px 5px 7px 5px;
            width: 80px;
            font-weight: 400;
            line-height: 20px;
            text-align: center;
            font-size: 11px;
        }
    </style>
    <!-- <style>
        .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 5px 0;
            border-top: 1px solid #404453;
            border-left: 1px solid #404453;
            border-bottom: 1px solid #404453;
            border-right: 1px solid #404453;
        }
    </style> -->

</head>
<body class="layui-layout-body">
<div class="">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="form_search" id="form_search" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-form-label-sm">养殖场</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select name="farmid" lay-verify="" lay-search="">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label layui-form-label-sm">类型</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select name="alarm_content" lay-verify="" lay-search="">
                                <option value=""></option>
                                <option value="出料堵塞">出料堵塞</option>
                                <option value="出水堵塞">出水堵塞</option>
                                <option value="饲喂器离线">饲喂器离线</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" >
                        <label class="layui-form-label layui-form-label-sm" style="width: 60px;">日期范围</label>
                        <div class="layui-input-inline" style="width: 160px;">
                            <input type="text"  class="layui-input" name="datespan" id="datespan" placeholder=" - ">
                        </div>
                    </div>
                    <!--<div class="layui-inline">
                        <label class="layui-form-label auto-size-label"></label>
                        <div class="layui-input-inline">
                            <input type="text" name="alarm_content" placeholder="请输入关键字" lay-verify="" autocomplete="off" class="layui-input">
                        </div>
                    </div>-->
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="btn_search"><i class="layui-icon layui-icon-search"></i>查询</button>
                        <!--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm action-export layui-hide" lay-submit="" lay-filter="btn_search"><i class="fa fa-file-excel-o"></i> 导出</button>-->
                    </div>

                </div>
            </form>

            <table class="layui-hide" id="table" lay-filter="table"></table>

        </div>
    </div>
</div>


<script src="../plugins/layui/layui.js?v=${.Config.basic.version}"></script>
<script src="../plugins/layui/xm-select-v1.2.4.js?v=${.Config.basic.version}"></script>
<script src="../plugins/jquery/jquery-1.10.2.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.core.min.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.excheck.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.exedit.js?v=${.Config.basic.version}"></script>
<script src="../plugins/jquery.slimscroll.min.js?v=${.Config.basic.version}"></script>
<script src="../plugins/toastr/toastr.min.js"></script>
<script src="../plugins/moment.min.js"></script>
<script src="../js/utils.js?v=${.Config.basic.version}"></script>
<script src="../js/verify.js?v=${.Config.basic.version}"></script>
<script src="../js/func.js?v=${.Config.basic.version}"></script>
<script>
    var table=null;
    var form=null;
    var laydate = null;
    var lay_index=null;
    var Table=null;


    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var func_url="${.func_url}";
    var actions=[];
    var token = window.localStorage.getItem("token");
    token = 'Bearer ' + token;
    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','layer','form', 'table','laydate'],function(){
        form = layui.form;
        table = layui.table;
        laydate = layui.laydate;
        toastr.options = {
            "closeButton": false, //是否显示关闭按钮
            "debug": false, //是否使用debug模式
            "positionClass": "toast-top-center",//弹出窗的位置
            "showDuration": "300",//显示的动画时间
            "hideDuration": "1000",//消失的动画时间
            "timeOut": "2000", //展现时间
            "extendedTimeOut": "1000",//加长展示时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut" //消失时的动画方式
        };
        laydate.render({
            elem: '#datespan'
            //,type: 'datetime'
            ,range: '~'
            , theme: '#3c7cff'
            ,value: ''
            ,isInitValue: true
            ,done: function(value, date, endDate){
                //setTimeout(function(){load();},200);
            }
        });
        $.ajax({
            type: 'GET',
            url: '../Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
                //initTable();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        $.ajax({
            type: 'GET',
            url: '../Api/Farm/List',
            data: {},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (res) {
                console.info(res)
                if(res.code>=0){
                    var items = res.data;
                    console.info(items)
                    //栏舍下拉
                    var html="<option value='' ></option>";
                    for(var i=0;i<items.length;i++){
                        var selectd="";
                        html+="<option "+selectd+" value=\""+items[i].id+"\">"+items[i].farmname+"</option>";
                    }
                    $("select[name='farmid']").html(html);
                    form.render('select');
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载设备类型失败');
            }
        });


        initTable();

        //监听提交
        form.on('submit(btn_search)', function(data){
            var date = data.field.datespan.split(" ~ ");
            if(date.length==2){
                data.field.begin=date[0];
                data.field.end=date[1];
            }else{
                data.field.begin='';
                data.field.end='';
            }
            search(data.field);
            return false;
        });

    });


    function initTable(){
        Table = table.render({
            elem: '#table'
            //,data:data
            ,url:'../Api/Alarm/NowPage'
            ,height: 'full-80'
            ,method:'GET'
            ,headers : {'Authorization': 'Bearer '+window.localStorage.getItem("token")}
            ,where: { status:"1"}
            ,page: {
                limit:50,
                limits:[10, 20, 30, 40, 50,100,200,300,400],
                theme: '#3c7cff'
            }
            ,limit:20
            //,toolbar: '#table_toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['']
            ,title: ''
            ,even:true
            ,size: 'sm' //小尺寸的表格
            // ,skin: 'nob' //无框风格
            ,cols: [[
                {field:'farmname', title:'养殖场',  sort: true},
                {field:'housename', title:'栏舍',  sort: true},
                {field:'remark', title:'栏位', width:100,  sort: true},
                {field:'device_addr', title:'网关', width:100,  sort: true},
                {field:'sn', title:'SN', width:100,  sort: true},
                {field:'alarm_content', title:'告警内容',  sort: true,templet: function(d){
                        var html = "";
                        if(d.status==0){
                            html+="<span class=\"layui-text-green\">"+d.alarm_content+"</span> "
                        }else{
                            html+="<span class=\"layui-text-red\">"+d.alarm_content+"</span>"
                        }
                        return html;
                    }}
                ,{field:'add_time', title:'发生时间', width:200, sort: true}
            ]]
            ,done: function(res, curr, count){
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
                var that = this.elem.next();

            }
        });

        table.on('sort(table)', function(obj){
            table.reload('table', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    //order_field: obj.field //排序字段
                    //,order_type: obj.type //排序方式
                    order:obj.field+" "+(obj.type||"")
                }
            });
        });


    }

    function search(params) {
        Table.reload({
            where: params
            ,page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }




</script>




<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>

</body>
</html>